<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery Marquee Demo</title>
    <style type="text/css" media="screen">

      body { 
          margin: 10px; 
          padding: 10px; 
          font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
          font-size: 80%;
      }
      
      div.demo {
          border: 3px solid #0BB427;
          padding: 10px;
          margin-bottom: 10px;
      }
      
      code {
          padding: 3px;
          background-color: #eee;
      }
       
        .example4 {
         line-height:8mm;
          font-size:12pt;
         }
        

    </style>
		<script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>       
        <script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>  	  	      
    <script type="text/javascript" src="../../js/ctp/textslide/jquery.marquee.js"></script>	    
    <script type="text/javascript" src="../../js/ctp/textslide/ctp.ui.textslide.js"></script>    

    <script type="text/javascript">
 
    $(document).ready(function () {
        // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
                
       new ctp.ui.textslide ({
 	     width:'350',
	     height:'20',
	     classStyle:'',
       scrollType:'scroll',
       direction:'left',
       scrollAmount:'1',
	     textContent:'要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置。',
       renderTo:'example1'       	        	
        	});       


       new ctp.ui.textslide ({
 	     width:'350',
	     height:'20',
	     classStyle:'',
       scrollType:'alternate',
       direction:'right',
       scrollAmount:'2',
	     textContent:'左右晃来晃去',
       renderTo:'example2'       	        	
        	}); 

  
       new ctp.ui.textslide ({
 	     width:'350',
	     height:'20',
	     classStyle:'',
       scrollType:'slide',
       direction:'right',
       scrollAmount:'2',
       loop:'3',
	     textContent:'动作只有三次',
	     draggable:'flase',
	     renderTo:'example3'       	        	
        	});   
  
  
       
       new ctp.ui.textslide ({
 	     width:'350',
	     height:'100',
	     classStyle:'example4',
       scrollType:'scroll',
       direction:'up',
       scrollAmount:'1',
	     textContent:'CTP平台权限管理功能按照所控制的内容层次不同分为平台级权限管理和应用级权限管理。平台权限管理包括了组织机构管理、用户管理、角色管理、菜单管理、功能管理等功能，这些功能根据不同的应用环境灵活的配置组合以适应应用系统的发展需要。',
       renderTo:'example4'       	        	
        	});
                       
    });

    </script>
  </head>
  <body id="page">
    <div id="doc">
        <h1>Marquee Demo</h1>

        <div class="demo">
            <h2>Demo</h2>
            
            <pre><code>&lt;marquee behavior="scroll" scrollamount="1" direction="left" width="350"&gt;</code></pre>
            <div id='example1'></div>			
			      
			      <pre><code>&lt;marquee scrollamount="2" behavior="alternate" direction="right" width="350"&gt;</code></pre>
            <div id='example2'></div>
            
            <pre><code>&lt;marquee loop="3" behavior="slide" direction="right" width="350"&gt;</code></pre>
            <div id='example3'></div>
            
            <pre><code>&lt;marquee behavior="scroll" direction="up" scrollamount="2" height="100" width="350"&gt;</code></pre>
            <div id='example4'></div>
 
        </div>

    </div>
  </body>
</html>
